<%@ page language="java" import="java.util.*,net.roseparadise.config.*,net.roseparadise.vo.*" pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
	int maxCount = PropertiesConfig.getInstance().getInt("ListSize.AlbumManage");
	String isstudio =(String)request.getAttribute("isstudio");
	UserVO user = (UserVO)session.getAttribute("currentUser");
	String memberid =Integer.toString(user.getId());
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>

		<title>Rose Paradise</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="<%=basePath%>/js/ext/ext-base.js"></script>
		<link rel="stylesheet" type="text/css"
			href="<%=basePath%>/css/ext-all.css" />
		<script type="text/javascript"
			src="<%=basePath%>/js/ext/ext-all-debug.js"></script>
		<script type="text/javascript"
			src="<%=basePath%>/js/locale/ext-lang-zh_CN.js"></script>
		 <style type="text/css">
	     
	        .add {
	            background-image:url(<%=basePath%>/images/icons/fam/add.gif) !important;
	        }	      
	        .remove {
	            background-image:url(<%=basePath%>/images/icons/fam/delete.gif) !important;
	        }
	    </style>
			
		<script type="text/javascript">
			Ext.onReady(function(){
			Ext.QuickTips.init();
			Ext.form.Field.prototype.msgTarget = 'side';
			var form = new Ext.form.FormPanel({
		        baseCls: 'x-plain',
		        layout:'absolute',
		        url:'<%=basePath%>action/PhotoManage.htm?cmd=addalbum',
		        defaultType: 'textfield',
		        id:'loginForm',
		        items: [{
		            x: 0,
		            y: 5,
		            xtype:'label',
		            text: Rose.Locale.Album.albumNameText
		        },{
		            x: 60,
		            y: 0,
		            name: 'albumname',
		            allowBlank:false,
		            vtype:'alphanum',
		            minLength : 2,
		            maxLength : 30,
		            anchor:'100%'
		        },{
		            x: 0,
		            y: 35,
		            xtype:'label',
		            text: Rose.Locale.Album.albumOrderText
		        },{
		            x: 60,
		            y: 30,
		            name: 'albumorder',
		            allowBlank:false,
		            maskRe:/[0-9]/	,	
		            minLength : 1,
		            maxLength : 10,
		            anchor:'100%'
		        },{
		            x: 33,
		            y: 62,
		            xtype:'checkbox',
		            name: 'isstudio'
		        },{
		            x: 60,
		            y: 65,
		            xtype:'label',
		            text: Rose.Locale.Album.isstudioText
		        }]
		    });
		
		    var window = new Ext.Window({
		        title: Rose.Locale.Album.addTitleText,
		        width: 360,
		        height:160,
		        layout: 'fit',
		        plain:true,
		        modal :true,
		        resizable : false,
		        draggable : false,
		        bodyStyle:'padding:5px;',
		        buttonAlign:'right',
		        items: form,
		
		        buttons: [{
		            text: Rose.Locale.Common.addText,
		            listeners: {
		            	click: function(){	
		        			form.getForm().submit({
		        				success:function(f,a){
			        				if(a.result.success=="true"){
			        					store.reload();
			        					form.getForm().reset();
			        					window.hide();
			        				}else{
			        					Ext.Msg.alert(Rose.Locale.Common.failureTitleText,Rose.Locale.Album.addFailureTitleText);
			        				}
		        				},
		        				failure:function(f,a){
		        					Ext.Msg.alert(Rose.Locale.Common.failureTitleText,Rose.Locale.Common.failureText);
		        				}
		        			});
		                }
		            }
		        }]
		    });
		
		    var studioProxy = new Ext.data.HttpProxy({
		            url: '<%=basePath%>action/PhotoManage.htm?cmd=getalbumlist&isstudio=Y' 
		        });
			var personalProxy = new Ext.data.HttpProxy({
		            url: '<%=basePath%>action/PhotoManage.htm?cmd=getalbumlist&isstudio=N&memberid='+<%=memberid%>
		        });
		    // create the Data Store
		    var store = new Ext.data.JsonStore({
		        root: 'data',
		        totalProperty: 'count',
		        idProperty: 'albumid',
		       // remoteSort: true,
		
		        fields: ['albumid',
		            'isstudio', 
		            {name: 'member'},
		            {name: 'albumorder', type: 'int'},
		            'albumname',		            
		            {name: 'createdate', mapping: 'createdate', type: 'date', dateFormat:'YmdGis'}		            
		        ],		
		      
		        proxy: <%=("Y".equals(isstudio)) ? "studioProxy" : "personalProxy" %>
		    });
		   store.load({params:{start:0, limit:<%=maxCount%>}});
		
		    // pluggable renders
		    function renderTopic(value, p, record){
		        return String.format(
		                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
		                value, record.data.forumtitle, record.id, record.data.forumid);
		    }
		    function renderLast(value, p, r){
		        return String.format('{0}', value.dateFormat('M j, Y, g:i a'));
		    }
			var name_edit = new Ext.form.TextField({
				allowBlank: false,
				minLength: 2,
				maxLength: 30
			});
			var order_edit = new Ext.form.TextField({
				allowBlank: false,
				maskRe:/[\d]/,
				minLength: 1,
				maxLength: 10
			});
			var studio_edit = new Ext.form.ComboBox({
				triggerAction:'all',
				typeAhead : true,
				mode : 'local',
				store:  new Ext.data.SimpleStore({
					fields	:['id','val'],
					data	:[['Y','Y'],['N','N']]
				}),
				displayField:'val',
				valueField:'id'
			});
			var grid = new Ext.grid.EditorGridPanel({
		        width:700,
		        height:440,
		        title:Rose.Locale.Album.title<%=isstudio%>Text,
		        store: store,
		        enableColumnMove  : false,
		        stripeRows : true,
		        disableSelection : true,
		        loadMask : true,
				renderTo:document.body,
				enableHdMenu : false,
				autoExpandColumn:"createdate",
		        // grid columns
		        columns:[{
		          //  id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
		            header: Rose.Locale.Album.albumOrderText,
		            dataIndex: 'albumorder',
		            width: 60,
		            editor: order_edit,
		            sortable: false
		        },{
		            header: Rose.Locale.Album.albumIdText,
		            dataIndex: 'albumid',
		            width: 60,
		            hidden:true,
		            sortable: false
		        },{
		            header: Rose.Locale.Album.isstudioText,
		            dataIndex: 'isstudio',
		            editor: studio_edit,
		            width: 80,
		            sortable: false
		        },{
		            header: Rose.Locale.Album.albumNameText,
		            dataIndex: 'albumname',
		            editor: name_edit,
		            width: 200,		           
		            sortable: false
		        },{		            
		            id: 'member',
		            header: Rose.Locale.Album.creatorText,
		            dataIndex: 'member',
		            width: 200,
		            renderer:  function (value, p, r){
							        return String.format('{0}', value.name);
							    },
		            sortable: false
		        },{		            
		            id: 'createdate',
		            header: Rose.Locale.Album.createDateText,
		            dataIndex: 'createdate',
		            width: 70,
		            renderer: renderLast,
		            sortable: false
		        }],
		
		        // paging bar on the bottom
		        bbar: new Ext.PagingToolbar({
		        	id:'pageTB',
		            pageSize: <%=maxCount%>,
		            store: store,
		            displayInfo: true,
		            displayMsg: Rose.Locale.Album.displayText+'{0} - {1}'+ Rose.Locale.Album.displayofText+'{2}'+Rose.Locale.Album.displayendText,
		            emptyMsg: Rose.Locale.Album.emptyText,
		            items:[
		                '-', {
		                xtype:'button',
		                text: Rose.Locale.Common.addText,
		                iconCls:'add',
		                listeners: {
		                	click: function(){		                    
		                    	window.show();
		                    }
		                }
		            },'-', {
		                xtype:'button',
		                text: Rose.Locale.Common.removeText,
		                iconCls:'remove',
		                 handler: function(){
			                grid.stopEditing();
			                if(grid.getSelectionModel().hasSelection())
			                {			                	
								Ext.Msg.show({
									title: Rose.Locale.Common.removeTitleText, 
									buttons: Ext.MessageBox.YESNO,
									msg: Rose.Locale.Album.removeText,
									fn: function(btn){
										if (btn == 'yes'){
											var conn = new Ext.data.Connection();
											conn.request({
												url: '<%=basePath%>action/PhotoManage.htm?cmd=deletealbum',
												params: {
													albumid: grid.getSelectionModel().getSelected().data.albumid
												},
												success: function(resp,opt) { 
													grid.getStore().reload(); 
												},
												failure: function(resp,opt) { 
													Ext.Msg.alert(Rose.Locale.Album.removeFailureTitleText,Rose.Locale.Album.removeFailureText); 
												}
											});
										}
									}
								});
			                	
			                }
			            }
		            }
		          <%/* if(user.getRole() > (PropertiesConfig.getInstance().getInt("Rights.StudioMember")-1)){ %>
		            '-', {		                
		                text: Rose.Locale.Album.isstudioText,
		                iconCls:'save',
		                enableToggle:true,
		            <% if("Y".equals(isstudio)){ %>	
		                pressed: true,	 
		            <%}%>              
		                cls: 'x-btn-text-icon details',
		                toggleHandler: function(btn, pressed){
		               //Ext.Msg.alert('',);
		                    if(pressed){		 
		                   
		                        grid.setTitle(Rose.Locale.Album.titleYText);       
		                   	 	store.load({params:{isstudio:'Y',memberid:<%=memberid%>,start:0, limit:<%=maxCount%>}}); 
		                   	}else{
		                   		grid.setTitle(Rose.Locale.Album.titleNText);    
		                   		//Ext.Msg.alert(grid.getBottomToolbar().id,grid.getBottomToolbar().getXTypes());
		                   		store.load({params:{isstudio:'N',memberid:<%=memberid%>,start:0, limit:<%=maxCount%>}}); 
		                   	}
		                }		            
		            }
		          <%}*/%>
		            ]
		        }),
		        
		        sm: new Ext.grid.RowSelectionModel({
		        	singleSelect :true
		
   				 }),
		        listeners: {
		        	beforeedit: function(e){
		        		if( e.field == "isstudio" ){
		        		
		        			//Ext.Msg.alert(e.value,studio_edit.getRawValue());
		        		}
		        	},
					afteredit: function(e){
							
							var conn = new Ext.data.Connection();
							conn.request({
								url: '<%=basePath%>action/PhotoManage.htm?cmd=updatealbum',
								params: {									
									albumid: e.record.id,
									field: e.field,
									value: e.value
								},
								success: function(resp,opt) {
								//Ext.Msg.alert(e.field,e.value);
									e.record.commit();
								},
								failure: function(resp,opt) {
									e.record.reject();
								}
							});
						}
					}
		    });
		
		    
		});
	
	</script>
	</head>
	
	<body>
	
	</body>
</html>
